<template>
	<view class="add-product">
		<view class="add-product-1 carousel-info">
			<view class="add-image" @click="choseMainImg" v-if="!carouselInfo.image">
				<view>
					<image src="https://master.shengejiaju.cn/web/static/icons/ico_add_pic02@2x.png"></image>
					<view>上传轮播图</view>
				</view>
			</view>
			<view class="show-img" v-else>
				<image :src="carouselInfo.image" @click="previewImg" mode="aspectFill" style="width: 100%;"></image>
				<view @click="choseMainImg">更换轮播图</view>
			</view>
		</view>
		
		<view class="add-product-2">
			<view class="add-product-2-cell">
				<text class="title" style="width: 3em;">排序</text>
				<input type="text" placeholder="数字越大，排序越靠前(默认为0)" placeholder-style="color:#FE9B26"  v-model="carouselInfo.sort"/>
			</view>
			<view class="add-product-2-cell" style="justify-content: space-between;border-top: solid 1px #EEE; padding-top: 30rpx;">
				<text class="title" style="width: auto;">显示/隐藏</text>
				<switch @change="isUp" :checked="carouselInfo.is_online==1?true:false" style="transform:scale(0.8)" color="#2073F5"/>
			</view>
			<view class="add-product-2-cell" style="justify-content: space-between;border-top: solid 1px #EEE; padding-top: 30rpx;">
				<text class="title" style="width: auto;">关联商品</text>
				<view class="type">
					<text style="margin-right: 60rpx; font-size: 28rpx; display: inline-block; line-height: 60rpx; background-color: #F8F8F8; border-radius: 8rpx; color: #2073F5; padding: 0 20rpx;" @click="showProList(1)">+平台商品</text>
					<text style="font-size: 28rpx; display: inline-block; line-height: 60rpx; background-color: #F8F8F8; border-radius: 8rpx; color: #2073F5; padding: 0 20rpx;" @click="showProList(2)">+自营商品</text>
				</view>
			</view>
			<view class="add-product-2-cell">
				<text class="title" style="width: auto; font-size: 24rpx; color: #999;">平台商品或自营商品只能二选一</text>
			</view>
			<view class="add-product-2-cell" v-if="goods_info">
				<text class="title">已关联的商品：{{finalType==1?goods_info.goods_name:goods_info.store_goods_name}}</text>
			</view>
		</view>
		
		<view class="add-product-submit">
			<button @click="submit">{{carouselInfo.id?'修改':'保存'}}</button>
		</view>
		
		<uni-popup ref="selectPro" type="bottom" class="selectProItem">
			<view class="search-bar">
				<uni-search-bar @confirm="search" @input="input" :radius="100" cancelButton="always" @cancel="cancel"></uni-search-bar>
			</view>
			<scroll-view scroll-y class="selectView" @scrolltolower="loadMorePro">
				<view class="proList-item" v-for="(data,index) in ProList" :key="index" @click="chosePro(data)">
					<label>
						<image :src="data.image_middle"></image>
						<view class="proList-item-info">
							<view class="proList-item-info-tit">{{type==1?data.goods_name:data.store_goods_name}}</view>
							<view class="proList-item-info-price">零售价：￥{{data.retail_price}}</view>
							<view class="proList-item-info-price">利润：￥{{data.profit}}</view>
							<view class="proList-item-info-counts">人气：{{data.click}}</view>
						</view>
					</label>
				</view>
				<nothing :text="'没有商品'" :btn="false" v-if="!ProList.length"></nothing>
				<no-more :text="'数据加载完毕'" v-if="ProList.length && noMorePro" style="padding-bottom: 20rpx;"></no-more>
			</scroll-view>
		</uni-popup>
		
	</view>
</template>

<script>
	const md5 = require('../../static/utils/md5')
	import host from '@/api/config.js'
	export default {
		data() {
			return {
				carouselInfo: {
					image: '',
					is_online: 1,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					sort: '',
					client: 6
				},
				uploadParameter: {},
				ProList: [],
				noMorePro: false,
				proPage: 0,
				type: '',
				goods_info: '',
				finalType: ''
			};
		},
		onLoad(options) {
			if(options.id){
				uni.setNavigationBarTitle({
					title: '编辑轮播图'
				})
				this.getCarouselInfo(options.id)
			}
			this.init()
		},
		methods: {
			// 获取轮播详情
			getCarouselInfo(id){
				this.$api.slideshow_list({id: id}).then(res => {
					let carouselInfo = res.datas[0]
					this.type = carouselInfo.type
					this.finalType = carouselInfo.type
					this.goods_info = {
						goods_id: carouselInfo.goods_id,
					}
					if(this.type==1){
						this.goods_info.goods_name = carouselInfo.goods_name
					}else{
						this.goods_info.store_goods_name = carouselInfo.goods_name
					}
					this.carouselInfo = {
						id:  carouselInfo.id,
						image: carouselInfo.image,
						is_online: carouselInfo.is_online,
						store_id: carouselInfo.store_id,
						sort: carouselInfo.sort,
						client: carouselInfo.client
					}
				})
			},
			// 参数排序
			objKeySort(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {};
				for (var i = 0; i < newkey.length; i++) {
						newObj[newkey[i]] = obj[newkey[i]];
				}
				return newObj;
			},
			// 搜索商品
			search(e){
				if(this.type==1){
					this.getProList(0,e.value)
				}else{
					this.getStoreGoodsList(0,e.value)
				}
			},
			// 输入事件
			input(e){
				this.searchValue = e.value
			},
			// 获取商品列表
			getProList(page,keyword){
				if(keyword){
					this.ProList = []
				}
				let data = {
					limit: 30,
					page: page?page:0,
					order_by: 'add_time',
					asc: 1,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					keyword: keyword?keyword:''
				}
				this.$api.CaseGoodsList(data).then(res => {
					if(res.datas.length){
						res.datas.forEach(item => {
							this.ProList.push(item)
						})
					}else{
						this.noMorePro = true
					}
				})
			},
			getStoreGoodsList(page,keyword){
				if(keyword){
					this.ProList = []
				}
				let data = {
					limit: 30,
					page: page?page:0,
					order_by: 'add_time',
					asc: 1,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					keyword: keyword?keyword:''
				}
				this.$api.StoreGoodsList(data).then(res => {
					if(res.datas.length){
						res.datas.forEach(item => {
							this.ProList.push(item)
						})
					}else{
						this.noMorePro = true
					}
				})
			},
			// 加载更多商品
			loadMorePro(){
				if(!this.noMorePro){
					this.proPage++
					if(this.type==1){
						this.getProList(this.proPage,this.searchValue)
					}else{
						this.getStoreGoodsList(this.proPage,this.searchValue)
					}
				}
			},
			// 取消搜索
			cancel(){
				this.$refs.selectPro.close()
			},
			init(){
				let data = {}
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					data.port = 'wechat'
				}else{
					data.port = 'h5'
				}
				// #endif
				
				// #ifdef APP-PLUS
				switch(uni.getSystemInfoSync().platform){
					case 'android':
						data.port = 'android'
					  break;
					case 'ios':
						data.port = 'ios'
					  break;
				}
				// #endif
				
				data.key = JSON.parse(uni.getStorageSync('userInfo')).token
				
				data.timestamp = Math.round(new Date() * 1000)
				// 获取签名开始
				let obj = 'jjds2020+'
				let newObj = this.objKeySort(data)
				for (let i in newObj){
					obj += i + '=' + newObj[i] +'&'
				}
				obj = obj.substring(0, obj.length - 1)
				obj += '+jjds2020'
				obj = md5.hexMD5(obj)
				obj = obj.toUpperCase()
				// 获取签名结束
				data.sign = obj
				this.uploadParameter = data
			},
			choseMainImg(){
				let _this = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],
					success(res) {
						let imgs = []
						res.tempFiles.forEach(item => {
							imgs.push({
								uri: item.path
							})
						})
						uni.uploadFile({
							url: `${host}/api/Upimg/UpImg`,
							filePath: imgs[0].uri,
							name: 'file',
							formData: {
								port: _this.uploadParameter.port,
								key: _this.uploadParameter.key,
								timestamp: _this.uploadParameter.timestamp,
								sign: _this.uploadParameter.sign
							},
							success: (uploadFileRes) => {
								_this.carouselInfo.image = JSON.parse(uploadFileRes.data).datas[0]
							}
						});
					}
				})
			},
			previewImg(){
				let arr = []
				arr.push(this.carouselInfo.image)
				uni.previewImage({
					urls: arr
				})
			},
			isUp(e){
				if(e.detail.value){
					this.carouselInfo.is_online = 1
				}else{
					this.carouselInfo.is_online = 0
				}
			},
			submit(){
				this.carouselInfo.type = this.finalType
				if(this.goods_info){
					if(this.finalType==1){
						this.carouselInfo.goods_id = this.goods_info.goods_id
					}else{
						this.carouselInfo.goods_id = this.goods_info.store_goods_id
					}
				}
				if(this.carouselInfo.id){
					this.$api.Slideshow_Up(this.carouselInfo).then(res => {
						uni.showToast({
							icon: 'none',
							title: '修改成功',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack()
						},1500)
					})
				}else{
					if(!this.carouselInfo.image){
						uni.showToast({
							icon: 'none',
							title: '请上传图片',
							duration: 1500
						})
						return false
					}
					this.$api.Slideshow_add(this.carouselInfo).then(res => {
						uni.showToast({
							icon: 'none',
							title: '添加成功',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack()
						},1500)
					})
				}
			},
			async showProList(type){
				this.ProList = []
				this.noMorePro = false
				this.proPage = 0
				this.type = type
				if(this.type==1){
					await this.getProList()
				}else{
					await this.getStoreGoodsList()
				}
				this.$refs.selectPro.open()
			},
			chosePro(data){
				this.finalType = this.type
				this.goods_info = data
				this.$refs.selectPro.close()
			}
		}
	}
</script>

<style lang="scss">
	@import  '../../static/scss/add-product.scss';
	.search-bar{
		border-top: solid 1px #EEE;
		border-bottom: solid 1px #EEE;
	}
	.selectView{
		position: absolute;
		top: 110rpx;
		bottom: 0;
		.proList-item{
			padding: 20rpx;
			border-bottom: solid 1px #EEE;
			label{
				display: flex;
				align-items: center;
			}
			&:last-child{
				border-bottom: none;
			}
			image{
				width: 220rpx;
				height: 220rpx;
			}
			.proList-item-info{
				flex: 1;
				min-width: 0;
				margin-left: 20rpx;
				.proList-item-info-tit{
					font-size: 34rpx;
					height: 92rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.proList-item-info-price{
					font-size: 26rpx;
					color: #333;
					margin-top: 10rpx;
				}
				.proList-item-info-counts{
					font-size: 26rpx;
					color: #999;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>